<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html" />
	<![endif]-->

	<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico"> <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
	<script src="__STATIC__/layout/js/jquery.min.js"></script>
	<!-- Sweet Alert -->
	<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<!-- Sweet alert -->
	<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
	<style>
		.citylist{
			padding:0;
		}
		.citylist li{
			text-indent:10px;
			height:30px;
			line-height:30px;
		}
		.citylist li.on{
			background-color: #ccc;
		}
	</style>
</head>
<body class="white-bg" style="color:#333;padding:3px;">
<div class="ibox" style="padding: 10px">
	<div class="ibox-content">
		<div class="row">
			<div class="col-sm-5 ">
				<div class="ibox float-e-margins well">
					<div class="ibox-title">
						<h5>没分组的城市</h5>
					</div>
					<div class="ibox-content" style="padding:0;height:240px;">
						<ul class="unstyled citylist" id="citylist">
							{volist name="cities" id="row"}
							<li data-id="{$row.id}">{$row.title}</li>
							{/volist}
						</ul>
					</div>
				</div>
			</div>
			<div class="col-sm-2" style="text-align: center;">
					<a href="javascript:;" class="btn btn-default" id="shifttoright">>>>>>></a><br><br>
					<a href="javascript:;" class="btn btn-default" id="shifttoleft"><<<<<<</a>
			</div>
			<div class="col-sm-5" >
				<div class="ibox float-e-margins well">
					<div class="ibox-title">
						<h5>{$title}的城市</h5>
					</div>
					<div class="ibox-content" style="padding:0;height:240px;">
						<ul class="unstyled citylist" id="citylist2">
							{volist name="gaizucitys" id="row"}
							<li data-id="{$row.id}">{$row.title}</li>
							{/volist}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="ibox-content" style="text-align: center;">
		<a href="javascript:;" class="btn btn-primary" id="save">保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:;" class="btn btn-warning" id="back">返回</a>
	</div>

</div>
</body>
</html>
<script>
    $(function () {
		$('#citylist li,#citylist2 li').on('click',function () {
			$(this).toggleClass('on')
        })
		$('#shifttoright').on('click',function () {
			$('#citylist2').append($('#citylist li.on'))
        })
		$('#shifttoleft').on('click',function () {
            $('#citylist').append($('#citylist2 li.on'))
        })
		//保存
		$('#save').on('click',function () {
		    var arr = []
            $('#citylist2 li').each(function (idx,o) {
				arr.push($(o).data('id'))
            })
			var data = arr.join(',')
			$.ajax({
				'type':'post',
				'url':'{:url("savecity")}',
				'data':{cities:data,id:{$id}},
				'dataType':'json',
				'success':function (data) {
                    if(data.success){
                        swal({
                            title: data.msg,
                            type: "success"
                        },function(){
                            location.reload()
//                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });

                    }else
                        swal({
                            title: data.msg,
                            type: "warning"
                        });
                }
			})
        })
		$('#back').on('click',function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        })
    })
</script>